<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="divport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style>
		.box {
			box-sizing: border-box;
			font-size: 12px;
			width: 100%;
			animation: slideInDown 1s;
			border-radius: 12px;
			position: fixed;
			top: 0;
			left: 50%;
			opacity: 0.9;
			transform: translate3d(-50%, 0, 0);
			z-index: 9999;
			background: rgb(39, 40, 34);
			color: #fff;
			padding: 25px;
		}
		.main-btn {
			z-index: 999;
			color: #fff;
		
		}
		
		@keyframes slideInDown {
			from {
				-webkit-transform: translate3d(-50%, -100%, 0);
				transform: translate3d(-50%, -100%, 0);
				visibility: visible;
			}
		
			to {
				-webkit-transform: translate3d(-50%, 0px, 0);
				transform: translate3d(-50%, 0px, 0);
			}
		}
		.refuse {
			text-align: center;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			font-size: 12px;
			background-color: rgb(235, 69, 73);
		}
				
		.accept {
			margin-left: 20px;
			text-align: center;
			width: 40px;
			height: 40px;
			font-size: 12px;
			border-radius: 50%;
			background-color: rgb(2, 212, 3);
		}
		.flex{
			display: flex;
		}
		.flex-ai-c{
			align-items: center;
		}
		.flex-jc-sb{
			justify-content: space-between;
		}
		.flex-jc-c{
			justify-content: center;
		}
		.head-img{
			width: 40px;
			height: 40px;
		}
		.img{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1px solid rgb(200,200,200);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="flex flex-ai-c flex-jc-sb">
			<div class="flex flex-ai-c">
				<div class="head-img">
					<img class="img" />
				</div>
				<div style="margin-left: 10px;">
					<div class="username"></div>
					<div>邀请你视频通话</div>
				</div>
			</div>
			<div class="main-btn flex">
				<div class="refuse flex flex-jc-c flex-ai-c" @click="refuse">
					<span class="text">挂断</span>
				</div>
				<div class="accept flex flex-jc-c flex-ai-c" @click="accept">
					接听
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	let isShow = true
	let box = document.getElementsByClassName('box')
	let img = document.getElementsByClassName('img')[0]
	let username = document.getElementsByClassName('username')[0]
	console.log(username)
	username.innerHTML = 'name'
	img.src = '../img/yy.jpg'
</script>
</html>